<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>时尚头条</title>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<script src="js/rem.js"></script>
		<script src="js/swiper.js"></script>
		<link rel="stylesheet" type="text/css" href="css/master-FashonTop.css"/>
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/share.css"/>
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.js"></script>
	</head>
	<body>
		
		<div class="container">
			
			<header id="FT-header">
				<img class="title-top" src="img/状态栏.png" alt="">
				<div class="title">
					<img class="header-logo" src="img/logo_1.png" alt="">
					<a href="" class="search">&#xe616;</a>
				</div>
				
			</header>
			<nav>
				<ul class="FT-mainNav">
					<li class="active"><a>综合</a><span></span></li>
					<li><a>明星</a><span></span></li>
					<li><a>视频</a><span></span></li>
					<li><a>买手好物</a><span></span></li>
					<li><a>直播红包</a><span></span></li>
				</ul>
			</nav>
			<main class="FT-main" style="display:block;">
				<div class="banner">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" style="background:url(img/jx_Boy_banner1.png)no-repeat center/cover;"></div>
							<div class="swiper-slide" style="background:url(img/sp_b2.png) no-repeat center/cover"></div>
							<div class="swiper-slide" style="background:url(img/mshw_b2.png)no-repeat center/cover;"></div>
							<div class="swiper-slide" style="background:url(img/zh_b1.png) no-repeat center/cover"></div>
							<div class="swiper-slide" style="background:url(img/zh_b3.png) no-repeat center/cover"></div>
					</div>
					<div class="swiper-pagination"></div>
					</div>
				</div>	
				<section class="content">
					<div class="news">
						<div class="news-one">
							<img src="img/zh_b2.png" alt="">
							<span>独家</span>
							<a href="">ELLESHOP卢靖姗|所有的成名，都是幻觉</a>
			
						</div>
						<div class="comment">
							<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
							<span>
								<em class="pcomment">&#xe6d7;</em>
								<p class="comment_num">3323</p>
							</span>	
							<input class="commentIpt" type="txet" style="display: none;"  placeholder="请输入你想说的话" />
							<button class="enter" style="display:none;">确认</button> 
							<span><em class="FT-share">&#xe70d;</em></span>
						</div>
					</div>
					<div class="news">
						<div class="news-one">
							<img src="img/zh_b3.png" alt="">
							<span>独家</span>
							<a href="">ELLESHOP卢靖姗|所有的成名，都是幻觉</a>
				</div>
						<div class="comment">
							<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
							<span><em class="pcomment">&#xe6d7;</em><p class="comment_num">3323</p></span>
							<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
							<button class="enter" style="display: none;">确认</button> 
							<span><em class="FT-share">&#xe70d;</em></span>
						</div>
					</div>
				</section>
			</main>
			<main class="FT-main">
		
					<div class="banner-star">
						<img src="img/mx_b1.png" alt="">
					</div>
					<section class="content">
						<div class="news">
							<div class="news-one">
								<img src="img/mx_b2.png" alt="">
								<span>明星</span>
								<a href="">吴倩独家花絮2018.11.27</a>
				
							</div>
							<div class="comment">
								<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
								<span><em class="pcomment">&#xe6d7;</em><p class="comment_num">3323</p></span>
								<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
								<button class="enter" style="display: none;">确认</button> 
								<span><em class="FT-share">&#xe70d;</em></span>
							</div>
						</div>
						<div class="news">
							<div class="news-one">
								<img src="img/mx_b3.png" alt="">
								<span>明星</span>
								<a href="">吴倩独家花絮2018.11.27</a>
						
							</div>
							<div class="comment">
								<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
								<span><em class="pcomment">&#xe6d7;</em><p class="comment_num">3323</p></span>
								<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
								<button class="enter" style="display: none;">确认</button> 
								<span><em class="FT-share">&#xe70d;</em></span>
							</div>
						</div>
					</section>
				</main>
			<main class="FT-main">
				
				<div class="banner-video"></div>
				<section class="content">
					<div class="news">
						<div class="news-one">
							<img src="img/sp_b2.png" alt="">
							<span>视频</span>
							<a href="">独白| 余男，性感以外</a>
							<p>行事低调，角色张扬的余男今天做客ELLESHOP,看这位性感女神如何打造时尚风范，展现意想不到的风情。</p>
						</div>
						<div class="comment">
							<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
							<span><em class="pcomment">&#xe6d7;</em><p class="comment_num">3323</p></span>
							<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
							<button class="enter" style="display: none;">确认</button> 
							<span><em class="FT-share">&#xe70d;</em></span>
						</div>
					</div>
					<div class="news">
						<div class="news-one">
							<img src="img/sp_b3.png" alt="">
							<span>视频</span>
							<a href="">独白| 余男，性感以外</a>
							<p>行事低调，角色张扬的余男今天做客ELLESHOP,看这位性感女神如何打造时尚风范，展现意想不到的风情。</p>
						</div>
						<div class="comment">
							<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
							<span><em class="pcomment">&#xe6d7;</em><p class="comment_num">3323</p></span>
							<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
							<button class="enter" style="display: none;">确认</button> 
							<span><em class="FT-share">&#xe70d;</em></span>
						</div>
					</div>
				</section>
			</main>
			<main class="FT-main">
				<div class="banner-buyer"></div>
				<section class="content">
					<div class="news">
						<div class="news-one">
							<img src="img/mshw_b2.png" alt="">
							<span>好物</span>
							<a href="">THE MAZE·迷宫 上海时尚周AW19发布会</a>
			
						</div>
						<div class="comment">
							<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
							<span><em class="pcomment">&#xe6d7;</em><p class="comment_num">3323</p></span>
							<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
							<button class="enter" style="display: none;">确认</button> 
							<span><em class="FT-share">&#xe70d;</em></span>
						</div>
					</div>
					<div class="news">
						<div class="news-one">
							<img src="img/mshw_b3.png" alt="">
							<span>好物</span>
							<a href="">THE MAZE·迷宫 上海时尚周AW19发布会</a>
					
						</div>
						<div class="comment">
							<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
							<span><em class="pcomment">&#xe6d7;</em><p class="comment_num">3323</p></span>
							<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
							<button class="enter" style="display: none;">确认</button> 
							<span><em class="FT-share">&#xe70d;</em></span>
						</div>
					</div>
				</section>
			</main>
			<main class="FT-main">
				<div class="banner-benefits"></div>
				<section class="content">
					<div class="news">
						<div class="news-one">
							<img src="img/zbhb_b2.png" alt="">
							<span>红包</span>
							<a href="">韩东君直播红包</a>
			
						</div>
						<div class="comment">
							<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
							<span><em class="pcomment">&#xe6d7;</em><p  class="comment_num">3323</p></span>
							<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
							<button class="enter" style="display: none;">确认</button> 
							<span><em class="FT-share">&#xe70d;</em></span>
						</div>
					</div>
					<div class="news">
						<div class="news-one">
							<img src="img/zbhb_b2.png" alt="">
							<span>红包</span>
							<a href="">韩东君直播红包</a>
					
						</div>
						<div class="comment">
							<span><em class="zan">&#xe732;</em><p class="num">3623</p></span>
							<span><em class="pcomment">&#xe6d7;</em><p class="comment_num">3323</p></span>
							<input class="commentIpt" type="txet" style="display: none;"  name="" id="" placeholder="请输入你想说的话" />
							<button class="enter" style="display: none;">确认</button> 
							<span><em class="FT-share">&#xe70d;</em></span>
						</div>
					</div>
				</section>
			</main>
			
			
			<footer id="FT-footer">
				<section>
					<dl>
						<dt>&#xf012b;</dt>
						<dd>精选</dd>
					</dl>
					<dl>
						<dt>&#xe696;</dt>
						<dd>分类</dd>
					</dl>
					<dl class="active">
						<strong>
							<span>
								<img src="img/logo_active.png" alt="">
								<em style="color: #000;">时尚头条</em>
							</span>
						</strong>
			
					</dl>
					<dl>
						<dt>&#xf0179;</dt>
						<dd>购物车</dd>
					</dl>
					<dl>
						<dt>&#xe610;</dt>
						<dd>我的</dd>
					</dl>
				</section>
			</footer>
			<!-- 滤镜 -->
			<span class="filter">
					
			</span>
			<!-- 分享弹窗 -->
			<span class="alertwindow share" style="display: block;bottom: -9em;">
				<div class="fenxiangdao">
					<a href=""><span>&#xe615;</span><span>朋友圈</span></a>
					<a href=""><span>&#xe63c;</span><span>微信</span></a>
					<a href=""><span>&#xe618;</span><span>微博</span></a>
					<a href=""><span>&#xe666;</span><span>QQ</span></a>
				</div>
				<p class="quxiao"><span>取消</span></p>
			</span>
		</div>
		
		<script src="js/fashon.js" type="text/javascript" charset="utf-8"></script>
		<script>
			let mainLinks = document.querySelectorAll('footer dl')
			console.log(mainLinks)
			mainLinks[0].onclick=function(){
				location.href='index-jxAll.html'
			}
			mainLinks[1].onclick=function(){
				location.href='classifyBrandStore.html'
			}
			mainLinks[2].onclick=function(){
				location.href='index-FashonTop.html'
			}
			mainLinks[3].onclick=function(){
				location.href='cart.html'
			}
			mainLinks[4].onclick=function(){
				location.href='Myself.html'
			}
			
			let ftShare=document.querySelectorAll('.FT-share')
			console.log(ftShare)
			let alertwindow=document.querySelector('.alertwindow')
			let quxiao=document.querySelector('.quxiao')
			console.log(alertwindow,quxiao)
			
			let ftMains=document.querySelectorAll('.FT-main')
			console.log(ftMains)
			let filter=document.querySelector('.filter')
			
			for(let i=0;i<ftShare.length;i++){
				ftShare[i].onclick=function(){
					console.log(ftShare[i])
				$('.share').animate({
					bottom:0,
				},400)
				let parentEl = this.parentNode.parentNode.parentNode.parentNode.parentNode
				filter.style.display='block'
				parentEl.style.overflow='hidden'
				}	
			
			quxiao.onclick=function(){
				$('.share').animate({
					bottom:'-9rem',
				},400)
				for(let i=0;i<ftMains.length;i++){
					ftMains[i].style.overflow='auto'
				}
				filter.style.display='none'
				
				}	
			}
			
			
			<!-- 评论--!>
			
			let commentIpt=document.querySelectorAll('.commentIpt')
			let commentNum=document.querySelectorAll('.comment_num')
			let queRen=document.querySelectorAll('.enter')
			let pcomment=document.querySelectorAll('.pcomment')
			console.log(commentIpt,commentNum,queRen)
			
			
			for(let i=0;i<pcomment.length;i++){
				pcomment[i].onclick=function(){
					this.parentNode.nextElementSibling.style.display='block'
					this.parentNode.nextElementSibling.nextElementSibling.style.display='block'
					console.log(this.parentNode.nextElementSibling.nextElementSibling)
					
					this.parentNode.nextElementSibling.nextElementSibling.onclick=function(){
						
						
						if(this.previousElementSibling.value==''){
							this.style.display='none'
							this.previousElementSibling.style.display='none'
						}else{
							this.style.display='none'
							this.previousElementSibling.style.display='none'
							alert('评论成功')
							console.log(this.previousElementSibling.previousElementSibling)
							let parentEl = this.previousElementSibling.previousElementSibling
							let numEl = parentEl.querySelector('.comment_num')
							console.log(numEl.innerHTML)
							numEl.innerHTML=parseInt(numEl.innerHTML)+1
						}
					}
				}
				
			}
			
		</script>
	</body>
</html>
